<template>
<div class="user">
    <view class="UCenter-bg">
        <view class="user_center_top_content">
            <!-- #ifdef MP-WEIXIN -->

            <view @click="UserLogin">
                <open-data class='view_opdataurl' type="userAvatarUrl"></open-data>
            </view>
            <!-- #endif -->

            <!-- #ifdef APP-PLUS -->
            <view class="padding" @click="UserLogin">
                <view class="cu-avatar radius">
                    <text class="cuIcon-people"></text>
                </view>
            </view>
            <!-- #endif -->

            <view v-if="isshow" style="text-align:center">点击头像登录</view>
            <!-- #ifdef MP-WEIXIN -->
            <open-data class='view_opdataname' type="userNickName" lang="zh_CN"></open-data>
            <!-- #endif -->
            <view class="text-xl" style="padding-top:20px">
                智慧工厂纱线版
                <text class="text-df">v2.0</text>
            </view>
        </view>
        <image src="https://www.ahlinghui.com/Uploads/image/20190429/images/wave.gif" mode="scaleToFill" class="gif-wave"></image>
    </view>
    <hea-der></hea-der>
    <cu-list></cu-list>
	<anmin-tion></anmin-tion>
</div>
</template>

<script>
import HeaDer from './Children/header'
import CuList from './Children/culist'
import AnminTion from '../../colorui/components/AnminTion'
export default {
    data() {
        return {
            isshow: true
        }
    },
    methods: {
        UserLogin() {
            uni.navigateTo({
               url: '../API/login'
            })
        }
    },
    components: {
        HeaDer,
        CuList,
		AnminTion
    }
}
</script>

<style>
.user {
    background-color: rgba(245, 245, 245, 1);
}
.UCenter-bg {
    background-image: url(https://image.weilanwl.com/color2.0/index.jpg);
    background-size: cover;
    height: 550rpx;
    display: flex;
    justify-content: center;
    padding-top: 40rpx;
    overflow: hidden;
    position: relative;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-weight: 300;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.UCenter-bg text {
    opacity: 0.8;
}

.UCenter-bg image {
    width: 200rpx;
    height: 200rpx;
}

.UCenter-bg .gif-wave {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 99;
    mix-blend-mode: screen;
    height: 100rpx;
}

map,
.mapBox {
    left: 0;
    z-index: 99;
    mix-blend-mode: screen;
    height: 100rpx;
}

map,
.mapBox {
    width: 750rpx;
    height: 300rpx;
}

.padding {
    text-align: center;
}
.user_center_top_content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.user_center_top_content .view_opdataurl {
  height: 5em;
  width: 5em;
  overflow: hidden;
  display: block;
  border-radius: 50%;
  border: 1upx solid #ccc;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.user_center_top_content .view_opdataname {
  margin-top: 10upx;
  font-size: small;
}
</style>
